<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue-bootstrap">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}


.article{
    width: 210mm;
    padding-left: 10mm;
    padding-right: 10mm;
    padding-top: 5mm;
    box-shadow: 10px 10px 5px #888888;
    border: solid 1px #ddd;
    padding-bottom: 10mm;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 20mm;
}





        </style>
        <link rel="stylesheet" href="/static/lib/editor.md/css/editormd.min.css"/>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title">{{issue.subject || "问题详情"}}   <code>{{dict('issue.status',issue.status)?.value}}</code> </h3>
            </div>
            <div class="card-body">

                <div v-if="issue.editing">
                    <input v-else v-model="issue.subject">

                    <b v-if="!issue.editing">{{issue.subject}}</b>

                    紧急程度：<select v-model="issue.urgent">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                    <button @click="submit(issue,false)">提交</button>

                    <button @click="submit(issue,true)">提交并发布</button>



                </div>
                <div v-else>
                    <b>{{issue.subject}}</b>
                    紧急程度：<code>{{issue.urgent}}</code> 由<code>{{issue.createdBy}}</code>创建于<code>{{new Date(issue.createdAt).toLocaleString()}}</code> 已<code> {{issue.task}} </code>人认领。

                    <span v-if="issue.published">由<code>{{issue.publishedBy}}</code>发布于<code>{{new Date(issue.publishedAt).toLocaleString()}}</code> </span>


                    <div class="article">
                        <div class="markdown-body editormd-preview-container editormd-html-preview" v-html="issue.html">
                        </div>

                    </div>

                    <button @click="editIssue(issue)">编辑</button>

                    <button @click="publish(issue)">发布</button>
                </div>


            </div>


        </div>

        <div class="card" v-if="issue?.taskList?.length && !issue.editing">

            <div class="card-header">
                <h3 class="card-title"> 任务 </h3>
            </div>
            <div class="card-body">
                <template v-for="(task,ti) in issue.taskList">
                    <b>{{task.subject}}</b> |
                </template>
            </div>
        </div>
        <div class="card" v-if="issue?.commentList?.length && !issue.editing">

            <div class="card-header">
                <h3 class="card-title">相关评论</h3>
            </div>
            <div class="card-body">
                <template v-for="(comment,ci) in issue.commentList">
                    <div>
                        <b>#{{ci+1}}</b>{{comment.subject}}
                        <div v-html="comment.html"></div>
                        <a @click="editingComment(comment)">编辑</a>
                    </div>
                </template>

            </div>

        </div>

        <div class="card" v-if="issue?.attachmentList?.length && !issue.editing">

            <div class="card-header">
                <h3 class="card-title">Attachment List </h3>
            </div>
            <div class="card-body">
                <template v-for="(attachment ,ai) in issue.attachmentList">
                    <b>{{attachment.filename}}</b> |
                </template>

            </div>

        </div>
        <div class="card" v-if="!issue.editing">

            <div class="card-header">
                <h3 class="card-title">我要跟帖 </h3>
            </div>
            <div class="card-body">
                标题： <input v-model="comment.subject">
                <button @click="updateComment(comment)">提交</button>

            </div>

        </div>
    </div>
    <div id="editor-md">
<textarea style="display:none;" class="content-markdown">

</textarea>
    </div>


</div>

<th:block th:fragment="footer">
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.0.0/marked.min.js"></script>
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/editor-md/1.5.0/editormd.min.js"></script>-->
    <script src="/static/lib/editor.md/editormd.min.js"></script>
    <script>
    var rendererMD = new marked.Renderer();
    marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false
    });

         var editor = editormd("editor-md", {
            width:"80%",
            height:400,
            path   : "/static/lib/editor.md/lib/",
            watch : false,
            toolbar  : true,
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/resource/file/upload?path=/pm2024",
            onload : function() {
                console.log("editor.md load");
                //this.setMarkdown("#PHP");
            }

         });





    </script>
    <script>

var issueId=_QS['id'];

const { createApp } = Vue;
    var app = createApp({
    data() {
      return { 
        issue:{},
        comment:{type:"issue"},
        catalogList:[],
        currentIndex : -1,
        selector:{target:{},withTaskList:1,withAttachmentList:1,withCommentList:1,pageSize:20}
      }
    },methods:{
        submit:function (issue,published){
            var url = "/pm/issue/update";
            issue.content = editor.getMarkdown();
            if(published) url=url+"?publish=1";
            axios.post(url, issue).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },publish:function (issue){
            var url = "/pm/issue/publish?id="+issue.id;
            issue.published = 1
            axios.post(url, issue).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },editIssue:function(issue){
            issue.editing = true;
            editor.setMarkdown(issue.content);
        }, editingComment:function (cmt){
            this.comment=cmt;
            editor.setMarkdown(this.comment.content)
        }, updateComment:function (comment){
            var url = "/pm/comment/update";
            comment.businessId = this.issue.id;
            comment.issueId = this.issue.id;
            comment.content = editor.getMarkdown();
            axios.post(url, comment).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },newIssue:function(){
            var issue = {subject:"新建问题"};
            this.list.push(issue)
            this.submit(issue)
        },catalog:function(catalog){
            for(var i=0;i<this.catalogList.length;i++){
                var ca = this.catalogList[i];
                if(ca.code==catalog) return ca;
            }
            return [];
        },dict:function(catalog,code){
            var ctg = this.catalog(catalog);
            if(!ctg || !ctg.dictList) return null;
            for(var i=0;i<ctg.dictList.length;i++){
                var ca =ctg.dictList[i];
                if(ca.code==code) return ca;
            }
            return null;
        },loadData:function(){
            var selector = this.selector || {}
            axios.post('/pm/issue/get?id='+issueId, selector).then((response)=> {
                console.log("response",response)
                this.issue = response.data.data|| {};
                if(this.issue.content){
                    var html = marked(this.issue.content);
                    this.issue.html = html;
                }
                this.catalogList = response.data.dict || [];

                if(this.issue?.commentList?.length){
                    for(var i=0;i<this.issue?.commentList?.length;i++){
                        var md = this.issue?.commentList[i];
                        if(md.content){
                            var html = marked(md.content);
                            this.issue.commentList[i].html = html;
                        }
                    }
                }
            }).catch(function (error) {
                console.log("error",error);
            });
        }
     },
    watch:{
        selector:{
            handler:function(nv,ov){
                loadData()
            },deep:true
        }
    }
  }).mount('#app');


function loadData( ){
    app.loadData();
}

window.onload=function(){
   loadData( );
}















    </script>
</th:block>
</body>
</html>